<script setup lang="ts">
import {
  ControlOutlined,
  GlobalOutlined,
  UnlockOutlined,
  BugOutlined,
  BranchesOutlined,
  RetweetOutlined,
  RadarChartOutlined,
  BugTwoTone
} from "@ant-design/icons-vue";

import GroupLine from "@iconify-icons/ri/group-line";
import Question from "@iconify-icons/ri/question-answer-line";
import CheckLine from "@iconify-icons/ri/chat-check-line";
import Smile from "@iconify-icons/ri/star-smile-line";
import ScanLine from "@iconify-icons/ri/qr-scan-2-line";
import BugFill from "@iconify-icons/ri/bug-fill";
import DataAnalysis from "@iconify-icons/ep/data-analysis";
import TrendCharts from "@iconify-icons/ep/trend-charts";

import { barChart, lineChart, roundChart } from "./components/chart";
import Segmented, { type OptionsType } from "@/components/ReSegmented";
// import { chartData, barChartData, progressData, latestNewsData } from "./data";
import { ReNormalCountTo } from "@/components/ReCountTo";
// const { isDark } = useDark();
const isDark = false;
defineOptions({
  name: "GatherChart"
});
defineProps({
  class: {
    type: String,
    default: "gather-box-success"
  }
});

/** 需求人数、提问数量、解决数量、用户满意度 */
const chartData = [
  {
    icon: TrendCharts,
    bgColor: "#effaff",
    color: "#41b6ff",
    duration: 2200,
    name: "资产数量",
    value: 36000,
    percent: "+88%",
    data: [2101, 5288, 4239, 4962, 6752, 5208, 7450] // 平滑折线图数据
  },
  {
    icon: DataAnalysis,
    bgColor: "#fff5f4",
    color: "#e85f33",
    duration: 1600,
    name: "域名数值",
    value: 16580,
    percent: "+70%",
    data: [2216, 1148, 1255, 788, 4821, 1973, 4379]
  },
  {
    icon: BugFill,
    bgColor: "#eff8f4",
    color: "#26ce83",
    duration: 1500,
    name: "告警数值",
    value: 16499,
    percent: "+99%",
    data: [861, 1002, 3195, 1715, 3666, 2415, 3645]
  },
  {
    icon: ScanLine,
    bgColor: "#f6f4fe",
    color: "#7846e5",
    duration: 100,
    name: "端口扫描率",
    value: 100,
    percent: "+100%",
    data: [100]
  }
];
</script>

<template>
  <div class="gather-four">
    <el-row :gutter="10">
      <el-col
        v-motion
        :xs="12"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="6"
        :offset="0"
        v-for="(item, index) in chartData"
        :key="index"
      >
        <el-card class="line-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">
              {{ item.name }}
            </span>
            <div
              class="w-8 h-8 flex justify-center items-center rounded-md"
              :style="{
                backgroundColor: isDark ? 'transparent' : item.bgColor
              }"
            >
              <IconifyIconOffline
                :icon="item.icon"
                :color="item.color"
                width="18"
              />
              <!-- <el-icon><DataAnalysis /></el-icon> -->
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <div class="w-1/2">
              <ReNormalCountTo
                :duration="item.duration"
                :fontSize="'1.6em'"
                :startVal="100"
                :endVal="item.value"
              />
              <p class="font-medium text-green-500">{{ item.percent }}</p>
            </div>
            <lineChart
              v-if="item.data.length > 1"
              class="!w-1/2"
              :color="item.color"
              :data="item.data"
            />
            <roundChart v-else class="!w-1/2" />
          </div>
        </el-card>
      </el-col>
      <el-col v-motion :xs="12" :sm="12" :md="6" :lg="6" :xl="6" :offset="0" />
      <el-col v-motion :xs="12" :sm="12" :md="6" :lg="6" :xl="6" :offset="0" />
      <el-col v-motion :xs="12" :sm="12" :md="6" :lg="6" :xl="6" :offset="0" />
    </el-row>
  </div>

  <!-- <div>
    <UnlockOutlined />
    <GlobalOutlined />
    <BugOutlined />
    <BugTwoTone />
    <BranchesOutlined />
    <ControlOutlined />
    <BlockOutlined />
    <RadarChartOutlined />
    <CopyOutlined />
    <RetweetOutlined />
  </div> -->
</template>

<style lang="scss" scoped>
.gather-four {
  .gather-box {
    height: 100px;
    padding-top: 15px;
    background: white;
    position: relative;

    h3 {
      margin: 0 0 0 20px;
      font-size: 30px;
    }
    h5 {
      margin: 10px 0 0 20px;
      color: black;
    }
  }

  .gather-box-success {
    color: #67c23a;
    border: 1px solid #67c23a;
  }

  .gather-box-primary {
    color: #409eff;
    border: 1px solid #409eff;
    border-radius: 3px;
  }

  .gather-box-warning {
    color: #e6a23c;
    border: 1px solid #e6a23c;
    border-radius: 3px;
  }

  .gather-box-blue {
    color: #13c2c2;
    border: 1px solid #13c2c2;
    border-radius: 3px;
  }
  .gather-box-purple {
    color: #722ed1;
    border: 1px solid #722ed1;
    border-radius: 3px;
  }

  .gather-box-icon {
    font-size: 50px;
    position: absolute;
    top: 25px;
    right: 25px;
  }
}
</style>
